<template>
	<div class="page has-navbar login" v-nav="{hideNavbar: true}">
		<div class="top"></div>
		<div class="formBox">
			<!-- <von-input 
			  type="tel" 
			  v-model="phone" 
			  placeholder="请输入手机号" 
			  label="用户名"
			  style="margin-bottom:.2rem;">
			</von-input> -->
			<div class="von-input-wrapper" style="margin-bottom: 0.2rem;">
			    <div class="item item-borderless item-input von-input" @click.stop="$refs.phone.focus()">
			        <div class="hairline-top"></div> <span class="input-label">用户名</span>
			        <input type="tel" style="height:50px;" placeholder="请输入手机号" ref="phone" v-model="phone">
			        <div class="hairline-bottom"></div>
			    </div> 
			    <span class="input-clear"></span>
			</div>
			<div class="von-input-wrapper">
			    <div class="item item-borderless item-input von-input" @click.stop="$refs.pwd.focus()">
			        <div class="hairline-top"></div> <span class="input-label">密码</span>
			        <input type="password" style="height:50px;" ref="pwd" placeholder="请输入密码" v-model="password">
			        <div class="hairline-bottom"></div>
			    </div> 
			    <span class="input-clear"></span>
			</div>
			<md-button class="button button-positive button-block" @click.native="login()">
			    登录
			</md-button>
			<div class="fingPW"><a href="javascript:;" @click="$router.forward('resetPassword')">点击修改密码</a></div>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
	data(){
		return{
			phone: '', // 手机号
			password: '', // 密码
		}
	},
	methods: {
		login: function () { // 登录事件
		    if ( !(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.phone)) ) {
		    	$toast.show('请输入正确的手机号', 2000).then(() => {})
		        return;
		    }
		    if ( !this.password ) {
		    	$toast.show('请输入密码', 2000).then(() => {})
		    	return;
		    }
		    let data = {
		        "username": this.phone,
		        "password": this.password,
		    }
		    let b = new Base64();
		    let authStr = 'Basic '+ b.encode(data.username+':'+data.password);

		    
		    let loginUrl = 'login';

		    if(window.location.href.split('?')[1]){
		        loginUrl = loginUrl+'?openid='+window.location.href.split('?')[1].split('=')[1];
		    }
		    this.$http.post(loginUrl, {}, {
		        auth: data // 添加登录验证
		    }).then((res)=>{
		        localStorage.setItem('token', authStr);
		        localStorage.setItem('phone', this.phone);
		        this.$router.push('/store');
		    }).catch((err)=>{
		        if ( err.response ) {
		            if ( err.response.status == 401 ) {
		                $toast.show('帐号或者密码有误', 2000).then(() => {})
		            } else if ( err.response.status == 403 ) {
		                $toast.show('权限不足', 2000).then(() => {})
		            } else {
		                $toast.show(err.response.data, 2000).then(() => {})
		            }
		        }
		    })
		}
	},
	created(){

	},
	mounted(){
		// localStorage.removeItem('token');
        // sessionStorage.clear();
  	}
}
</script>
<style lang="scss" scoped>
	@import "login";
</style>
